<!-- 库房管理 -->
 <template>
     <el-tabs v-model="activeAreaId" @tab-change="tabChange">

       
        <el-tab-pane v-for="item in areaData" :label="item.name" :name="item.id"></el-tab-pane>
       
      </el-tabs>
      <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="formData.name" placeholder="请输入库房名称"  />
            </el-form-item>
            <el-form-item>
                <el-input v-model="formData.brief" placeholder="请输入备注"  />
            </el-form-item>
            <el-form-item>
            
            <el-input-number v-model="formData.seq" :min="1" :max="99" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onAdd">添加</el-button>
            </el-form-item>
    
        </el-form>
      <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="id" label="ID" width="80" />
            <el-table-column fixed prop="name" label="名称" width="120" />
            <el-table-column fixed prop="brief" label="备注" width="200" />
            <el-table-column prop="statusX" label="状态" width="120" />
            <el-table-column prop="seq" label="排序" width="80" />
    
            <el-table-column prop="lastUpdateBy" label="最近更新人" width="120" :formatter="formatter" />
            <el-table-column prop="lastUpdateTime" label="时间" width="180" :formatter="formatter" />
    
            <el-table-column fixed="right" label="操作" width="160">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                
                    <el-button type="danger" v-if="scope.row.status == 1" @click="upOrDown(scope.row, 0)"
                        size="small">禁用</el-button>
                </template>
            </el-table-column>
        </el-table> 

        <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="User" name="first"></el-tab-pane>
    <el-tab-pane label="Config" name="second"></el-tab-pane>
    <el-tab-pane label="Role" name="third"></el-tab-pane>
    <el-tab-pane label="Task" name="fourth"></el-tab-pane>
  </el-tabs>
表格 -->



    </template>
 <script setup lang="ts">
    import { onMounted, ref, reactive } from 'vue'
    import { warehouseApi } from '@/api'
    import CategoryTree from '@/components/CategoryTree.vue';
    import { ElMessage, ElMessageBox } from 'element-plus'
    import dayjs from 'dayjs'
    import {useRouter} from 'vue-router'
    const router = useRouter()
    const tableData = ref([])
    const areaData = ref([])



    
    import { log } from 'console';
    const activeAreaId= ref(0)
    const formData = reactive({
        brief: '',
        name:'',
        seq:1
    })
    onMounted(() => {
      callAreaApi()
    })
    const onAdd = ()=>{
        warehouseApi.insert.call({name:formData.name,brief:formData.brief,parentId:activeAreaId.value,seq:formData.seq}).then((res:any)=>{
            callWareHouseApi()
        }) 
    }
    const callAreaApi = ()=>{
        warehouseApi.select.call({parentId:0}).then((res:any)=>{
            activeAreaId.value = res[0].id
            areaData.value = res
            callWareHouseApi()
        })
    }
    
    const callWareHouseApi =()=>{
        warehouseApi.select.call({parentId:activeAreaId.value}).then((res:any)=>{
            tableData.value = res
        })
    }
    
    const tabChange = (activeName:any)=>{
    
        callWareHouseApi()
    }
    
    const formatter = (_row: any, column: any, cellValue: any, _index: any) => {
    
    if (column.property == "lastUpdateTime") {
        return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
    }
    if (column.property == "lastUpdateBy") {
        return cellValue + " 先生"
    }
    }
    
    </script>